<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
	      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>table test</title>
	
	<style>
		#top{
			width: 800px; height: 30px;
			background: #ddd;
		}
		#top>a{
			width: 100px;height: 30px;
			float: left;
			color: #0e66a7;
			font-size: 12px;
			text-align: center;
			line-height: 30px;
			text-decoration: none;
		}
		#top>a:hover{
			height: 30px;
			background: #fff;
			border-top: 2px solid red;
			color: red;
			margin-top: -3px;
		}
		.table_test{
			width: 800px;
			border-bottom: 1px solid #ddd;
			color: #a8a2a7;
			font-size: 12px;
		}
		.table_test th{
			color: #666666;
			border-bottom: 1px solid #666666;
			padding: 5px 0;
		}
		.table_test a{
			text-decoration: none;
			color: #0e66a7;
		}
		.one{
			width: 550px;
			text-align: left;
		}
		td{
			border-bottom: 1px dotted #dddddd;
			text-align: center;
			padding: 5px 0;
		}
	
		/* 第二个 */
		.table_style{
			width: 200px; height: 200px;
			border: 1px solid red;
			background: #0aa1ed;
			font: 24px "仿宋";
			margin: 20px;
			padding:10px;
			
			border-spacing:10px;    /*设置td的外边距*/
			border-collapse: separate;   /*默认值separate 分离状态*/
			/*border-collapse: collapse;   !*内外边框合并 collapse 合并状态*!*/
			caption-side: top;   /*表格标题的位置  top/bottom*/
			table-layout: fixed; /*表设置显示规则  */
		}
		.table_style td{
			width: 50px;height: 50px;
			border: 2px solid green;
			background: orange;
			font: 16px chiller;
			padding: 10px;
			vertical-align: bottom;
		}
		
	</style>
</head>
<body>

<div id="top">
	<a href="">网友讨论圈</a>
	<a href="">晒单帖</a>
	<a href="">讨论帖</a>
	<a href="">问答帖</a>
	<a href="">圈子帖</a>
</div>
<table class="table_test">
	<tr >
		<th class="one">主题</th>
		<th>恢复/浏览</th>
		<th>作者</th>
		<th>时间</th>
	</tr>
	<tr>
		<td class="one"><a href="">银灰色的,很酷</a></td>
		<td>0/0</td>
		<td><a href="">2001年冬天</a></td>
		<td>2014-11-19 13:56:40</td>
	</tr>
	<tr>
		<td class="one"><a href="">银灰色的,很酷</a></td>
		<td>0/0</td>
		<td><a href="">2001年冬天</a></td>
		<td>2014-11-19 13:56:42</td>
	</tr>
	<tr>
		<td class="one"><a href="">银灰色的,很酷</a></td>
		<td>0/0</td>
		<td><a href="">2001年冬天</a></td>
		<td>2014-11-19 13:56:44</td>
	</tr>
	<tr>
		<td class="one"><a href="">银灰色的,很酷</a></td>
		<td>0/0</td>
		<td><a href="">2001年冬天</a></td>
		<td>2014-11-19 13:56:46</td>
	</tr>
</table>
<hr>
<table class="table_style">
	<caption>我是表格的标题</caption>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>
	</tr>
	<tr>
		<td>5</td>
		<td>666666666</td>
		<td>7</td>
		<td>8</td>
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>
	</tr>
	<tr>
		<td>5</td>
		<td>6</td>
		<td>7</td>
		<td>8</td>
	</tr>
</table>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>